<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Boss直聘济南Java公司分布图</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #container {
            margin-top: -20px;
            min-height: 800px;
        }
    </style>
</head>
<body>
<div id="app">
    <form class="form-inline" style="margin-top: 20px;">
        <div class="form-group">
            <label for="exampleInputName2">包含内容</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="多个以逗号隔开"
                   v-model="queryKeywords">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">排除内容</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="多个词以逗号隔开"
                   v-model="deleteKeywords">
        </div>
        <button type="button" class="btn btn-primary" @click="search()">搜索</button>
    </form>
    <blockquote>
        <ol>
            <li>搜索范围包括公司名称，地址，职位描述。</li>
            <li>点击公司名称跳转到官方详细页面。</li>
            <li>共计{{jobMap.length}}条数据</li>
        </ol>
    </blockquote>
</div>

<div id="container"></div>
<script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.3/vue.min.js"></script>
<!--key有ip白名单限制，需要自己申请-->
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=JLPBZ-2AS6P-VXDDG-VDTKP-O3ZBS-A2BG2"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            queryKeywords: '',
            deleteKeywords: '',
            jobMap: [{}],
        },
        methods: {
            search() {
                let _this = this;
                $.get("/job/boss", {
                    queryKeywords: this.queryKeywords,
                    deleteKeywords: this.deleteKeywords
                }, function (data) {
                    if (data.length == 0) {
                        alert("今天还没抓数据呢,或者没有搜索结果。。。");
                    } else {
                        _this.jobMap = data;
                        _this.generateMap();
                    }

                })
            },
            generateMap() {
                let center = new qq.maps.LatLng(36.67523, 117.01678);//中心点大明湖
                let map = new qq.maps.Map(document.getElementById('container'), {
                    center: center,
                    zoom: 13
                });
                let _this = this;
                for (let i = 0; i < _this.jobMap.length; i++) {
                    qq.maps.event.addListener(new qq.maps.Label({
                        position: new qq.maps.LatLng(_this.jobMap[i].longitude.split(",")[0], _this.jobMap[i].longitude.split(",")[1]),
                        map: map,
                        content: _this.jobMap[i].company
                    }), 'click', function () {
                        window.open(_this.jobMap[i].url, _this.jobMap[i].name)
                    });
                }
            }
        },
        mounted: function () {
            this.search();
        },
        created: function () {
        }
    })
</script>
</body>
</html>
